<template>
  <div>
    <button @click="comp = 'News'">新闻</button>
    <button @click="comp = 'Music'">音乐</button>

    <!-- 
      动态组件：我们可以通过components组件的is属性来决定渲染哪一个组件
        1.component内置组件：渲染一个‘元组件’为动态组件，依 is 的值，来决定哪个组件被渲染
        2.is属性必须动态绑定，并且值是被动态加载的组件的名称
     -->
    <component :is="comp"></component>
  </div>
</template>
<script>
import News from './components/News.vue';
import Music from './components/Music.vue';
export default {
  name: 'App',
  components: {
    News,
    Music,
  },
  data() {
    return {
      comp: '',
    };
  },
};
</script>
<style></style>
